<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>聊天室</title>
    <link rel="stylesheet" href="http://itphy.com/cdn/frozenui/css/frozen.css">
    <link rel="stylesheet" href="http://itphy.com/cdn/frozenui/css/basic.css">
    <style>
        body{
            background-color: #eaeaea;
        }
        .ui-footer~.ui-container {
            border-bottom: 80px solid transparent;
        }
        .ui-footer {
            height: 90px;
        }
        .ui-flex {
            border: none;
            min-height: 40px;
            margin-bottom: 10px;
        }
        .ui-avatar{
            width: 30px;
            height: 30px;
        }
        .icon-select{
            transform: rotate(180deg);
        }
        .ui-newstips{
            background-color: #18b4ed;
        }
        .dialog-content{
            padding:5px 3px;
            color: white;
            background-color: #0baae4;
            display:inline-block;
            zoom:1;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
            border-radius: 3px;
            text-align: left;
            font-size: 12px;
        }
        .dialog-content-left {
            width: 68%;
            margin-left: 10px;
            text-align: left;
        }
        .dialog-content-right {
            color: white;
            /*height: 80px;*/
            width: 68%;
            margin-right: 10px;
            text-align: right;
        }
        .demo-block{
            border-top: 35px solid transparent;
        }
        .ui-icon-set{
            font-size: 20px;
        }
        .ui-tool{
            height: 30px;
            line-height: 30px;
            margin: 7px 10px;
            padding-left: 10px;
            -webkit-box-flex: 1;
        }
    </style>
</head>
<!--
x轴:
    ui-flex-pack-start      靠左
    ui-flex-pack-center     考中
    ui-flex-pack-end        靠右
y轴:
    ui-flex-align-start     靠上
    ui-flex-align-center    靠中
    ui-flex-align-end       靠下
-->
<body ontouchstart>
<header class="ui-header ui-header-positive">
    <ul class="ui-tiled" style="font-weight: bold;font-size: 15px">
        <li><i class="ui-icon-arrow icon-select" ></i></li>
        <li></li>
        <li>林中鸟</li>
        <li></li>
        <li><i class="ui-icon-set"></i></li>
    </ul>
</header>
<footer class="ui-footer ui-footer-btn">
    <section class="ui-input-wrap ui-border-t">
        <div class="ui-tool">
            <div class="ui-btn ui-btn-primary" id="imgUpload">
                <input type="file" style="display: none">图片
            </div>
        </div>

    </section>
    <section class="ui-input-wrap ui-border-t">
        <div class="ui-input ui-border-radius">
            <input id="msg" type="text" name="" value="" placeholder="我也说一句...">
        </div>
        <button id="send" class="ui-btn ui-btn-primary">发送</button>
    </section>
</footer>
<section class="ui-container">
    <div class="demo-block" id="data">

    </div>
</section>
<script src="http://itphy.com/cdn/frozenui/js/frozen.js"></script>
<script src="http://itphy.com/cdn/jquery/jquery.js"></script>
<script src="/js/dialog.js"></script>
<script>
    var sock = null;
    var wsuri = "ws://itphy.com:9999/itphy/websocket?token=1111";
    // var wsuri = "ws://localhost:9999/itphy/websocket?token=1111";
    const sendForm=localStorage.token;
</script>
<script>
    $(function (){
        if(! sendForm){
            location.href="/login"
        }
        let $this = $("#data");
        const queue = getAsyncFunQueue();
        queue.add(first).start();
        if ('WebSocket' in window) {
            sock = new WebSocket(wsuri);
        } else {
            alert('Not support websocket')
        }

        sock.onopen = function () {
            console.log("connected to " + wsuri,sock);
        }
        sock.onclose = function (e) {
            console.log("connection closed (" + e.code + ")",sock);
        }

        sock.onmessage = function (e) {
            queue.add(load, JSON.parse(e.data)).add(scrollToEndQueue).start();
        }
        sock.onerror=function (e){
            console.log("connection error (" + e.code + ")");
        }
        function scrollToEndQueue(){
            scrollToEnd()
            queue.close();
        }
        function first() {
            commonAjax({
                url: "/getMxQyMsg",
                type:"GET"
            }, null, null, data => {
                if (data.code != 500) {
                    $(data.data).each((i, t) => {
                        loadData(t)
                    })
                }
                queue.close();
            })
        };
        function sendMsg(msg,type) {
            sock.send(JSON.stringify({
                sendFrom: sendForm,
                content: msg,
                type: type
            }));
        };
        function load(t) {
            loadData(t.data)
            queue.close();
        };
        function loadData(t){
            if(t.sendFrom !=sendForm){
                send.other($this,t.content,t.type)
            }else {
                send.me($this,t.content,t.type)
            }
        }
        (function (){
            $("#msg").keyup(function (e){
                if(e.keyCode ==13){
                    $("#send").click()
                }
            })
            $("#send").click(function (){
                let message=$("#msg").val();
                $("#msg").val("")
                if(message!=undefined&&message.trim()!=""){
                    sendMsg(message.replace(/ /g,"&nbsp;"))
                }
            })
            let file=$("#imgUpload").find("input");
            file.click(function (e){
                e.stopPropagation();
            });
            file.change(function (e){
                let fileObj=this.files[0],$this=this;
                console.log(fileObj)
                if(fileObj){
                    ImgSmall.upload({
                        url:"http://love.itphy.com:9999/oss",
                        file: fileObj
                    },(t)=>{
                        if(t){
                            sendMsg(t,0);
                            file.val("");
                        }
                    })
                }
            });
            $("#imgUpload").click(function (){
                file.click()
            });
        })();
    })
</script>
</body>
</html>
